<template>
    <VBar :options="options" :height="props.height" />
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import VBar from './index.vue'

interface Props {
    title?: string
    align?: string
    tooltip?: any
    legends?: any
    emphasis?: any
    height?: number
    datas: any
}

const props = withDefaults(defineProps<Props>(), {
    title: '',
    align: 'center',
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
    },
    legends: {
        orient: 'vertical',
        left: 'right',
        top: 0
    },
    height: 300,
    emphasis: {}
})

const options = ref({})
watchEffect(() => {
    let legends : any[] = []
    let pies : any[] = []
    Object.keys(props.datas).forEach((key) => {
        legends.push(key)
        if (typeof props.datas[key] === 'number') {
            pies.push({
                value: props.datas[key],
                name: key
            })
        } else {
            pies.push({
                value: props.datas[key].value,
                name: key
            })
        }
    })
    const series = [
        {
            type: 'pie',
            name: '',
            radius: '85%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: pies,
            emphasis: props.emphasis
        }
    ]
    options.value = {
        title: {
            text: props.title,
            left: props.align
        },
        tooltip: props.tooltip,
        legend: {
            ...props.legends,
            data: legends
        },
        series: series
    }
})

</script>